import { useRouter } from "vue-router"
type TProps = {

}
type IItem = {
  label: string,
  icon: any,
  path: string
}
const FormItem = (props: TProps, ctx: any) => {
  // 传递参数
  const {

  } = props
  const router = useRouter()

  const list: IItem[] = [
    {
      label: '代码运行',
      icon: <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="852" width="50" height="50"><path d="M922.317764 0H101.64469A100.312307 100.312307 0 0 0 1.634036 100.010654V923.989346a100.312307 100.312307 0 0 0 100.010654 100.010654h820.673074a100.299739 100.299739 0 0 0 99.998085-100.010654V100.06093A100.299739 100.299739 0 0 0 922.317764 0zM427.933063 402.04107l-177.321894 103.064894 177.321894 97.094672v81.257871L179.684925 534.831388v-57.477532l248.248138-160.529857z m70.938812 364.661192h-53.970812l78.643542-509.303973h53.958243z m345.393085-231.845736L596.004253 683.445938v-81.257871l177.321894-97.094672-177.321894-103.064894v-85.217071l248.260707 160.542426z" p-id="853" fill="#1296db"></path></svg>,
      path: '/code-compiler'
    },
    {
      label: '五子棋',
      icon:<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1104" width="50" height="50"><path d="M864.019692 64H160.019692a95.980308 95.980308 0 0 0-96.019692 96.019692v704a95.980308 95.980308 0 0 0 96.019692 95.980308h704a96.019692 96.019692 0 0 0 95.980308-96.019692V160.019692a96.019692 96.019692 0 0 0-96.019692-95.980307z m31.980308 96.019692v192h-224.019692V128h192a31.980308 31.980308 0 0 1 32.019692 32.019692z m-115.830154 448a143.990154 143.990154 0 0 0-108.189538-108.189538v-83.849846h224.019692v192.039384h-115.830154zM260.489846 415.940923a128 128 0 0 0 91.529846 91.529846v100.509539H128v-192.039385h132.489846z m247.020308-63.960615a127.960615 127.960615 0 0 0-91.490462-91.529846V128h191.960616v224.019692h-100.43077z m-91.490462 155.490461a127.921231 127.921231 0 0 0 91.490462-91.490461h100.509538v83.810461a144.029538 144.029538 0 0 0-108.189538 108.150154h-83.849846v-100.430769z m83.810462 164.509539a144.029538 144.029538 0 0 0 108.150154 108.150154v115.830153h-191.960616v-224.019692h83.810462z m140.169846 47.970461a79.990154 79.990154 0 1 1 0-159.980307 79.990154 79.990154 0 0 1 0 159.980307zM159.980308 128h192v132.489846a128 128 0 0 0-91.490462 91.529846H128V159.940923a31.980308 31.980308 0 0 1 32.019692-31.980308zM128 864.019692v-192h224.019692v223.980308H159.940923a31.980308 31.980308 0 0 1-31.980308-32.019692z m736.019692 31.980308h-192v-115.830154a143.990154 143.990154 0 0 0 108.150154-108.189538h115.830154v192a31.980308 31.980308 0 0 1-32.019692 32.019692z" fill="#d4237a" p-id="1105"></path></svg>,
      path: ''
    },
    {
      label: '聊天室',
      icon: <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4012" width="50" height="50"><path d="M201.142857 201.142857h621.714286v621.714286H201.142857z" fill="#FFFFFF" p-id="4013"></path><path d="M797.348571 91.337143H225.408A135.314286 135.314286 0 0 0 91.428571 226.816v571.044571a134.802286 134.802286 0 0 0 134.637715 134.729143h571.867428A135.314286 135.314286 0 0 0 932.571429 797.769143V226.816a136.301714 136.301714 0 0 0-135.222858-135.478857zM511.378286 732.690286a328.868571 328.868571 0 0 1-88.246857-11.904 106.422857 106.422857 0 0 0-23.917715 7.314285l-54.363428 33.865143c-15.945143 10.587429-21.211429 6.637714-15.268572-11.940571l11.904-42.459429a81.92 81.92 0 0 0-1.974857-25.234285 228.790857 228.790857 0 0 1-107.465143-187.300572c0-130.797714 125.366857-237.714286 279.314286-237.714286a296.777143 296.777143 0 0 1 227.565714 100.224l-260.022857 123.52a40.667429 40.667429 0 0 1-53.705143-3.291428l-41.837714-37.193143c-19.218286-6.016-25.856 0.658286-19.858286 17.883429l45.092572 109.586285c9.965714 16.603429 25.234286 21.942857 50.450285 3.291429l301.750858-183.954286a209.700571 209.700571 0 0 1 29.824 106.934857c0.073143 131.492571-125.366857 238.372571-279.241143 238.372572z m0 0" fill="#09BB07" p-id="4014"></path></svg>,
      path: '/chat'
    },
    {
      label: 'React运行',
      icon: <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3442" width="50" height="50"><path d="M347.766154 796.475077c-120.910769 29.026462-217.284923 17.447385-252.652308-43.795692-35.328-61.203692 2.835692-150.449231 88.379077-240.679385C97.949538 421.809231 59.785846 332.524308 95.113846 271.320615 130.481231 210.077538 226.855385 198.498462 347.766154 227.524923c35.328-119.217231 93.538462-196.923077 164.233846-196.923077s128.905846 77.705846 164.233846 196.923077c120.910769-29.026462 217.284923-17.447385 252.652308 43.795692 35.328 61.203692-2.835692 150.449231-88.379077 240.679385 85.543385 90.190769 123.707077 179.475692 88.379077 240.679385-35.367385 61.243077-131.741538 72.822154-252.652308 43.795692-35.328 119.217231-93.538462 196.923077-164.233846 196.923077s-128.905846-77.705846-164.233846-196.923077z m-13.193846-51.042462c-8.270769-37.336615-14.572308-77.705846-18.628923-120.24123a984.694154 984.694154 0 0 1-94.79877-76.248616c-69.632 73.058462-101.927385 140.445538-80.541538 177.467077 21.385846 37.060923 95.862154 42.771692 193.969231 19.022769z m354.855384-466.86523c8.270769 37.336615 14.572308 77.705846 18.628923 120.24123 34.816 24.772923 66.599385 50.412308 94.79877 76.248616 69.632-73.058462 101.927385-140.445538 80.541538-177.467077-21.385846-37.060923-95.862154-42.771692-193.969231-19.022769z m18.628923 346.584615a984.694154 984.694154 0 0 1-18.628923 120.280615c98.067692 23.748923 172.583385 18.038154 193.969231-19.022769 21.385846-37.021538-10.909538-104.369231-80.541538-177.467077a984.694154 984.694154 0 0 1-94.79877 76.248616z m4.450462-69.041231c18.747077-14.611692 36.273231-29.420308 52.460308-44.110769-16.147692-14.690462-33.713231-29.499077-52.460308-44.110769a1243.096615 1243.096615 0 0 1 0 88.221538zM315.943385 398.808615c4.056615-42.535385 10.358154-82.904615 18.628923-120.24123-98.067692-23.748923-172.583385-18.038154-193.969231 19.022769-21.385846 37.021538 10.909538 104.369231 80.541538 177.467077a984.694154 984.694154 0 0 1 94.79877-76.248616zM311.532308 467.889231c-18.747077 14.611692-36.273231 29.420308-52.460308 44.110769 16.147692 14.690462 33.713231 29.499077 52.460308 44.110769a1243.096615 1243.096615 0 0 1 0-88.221538z m74.043077 263.168a912.699077 912.699077 0 0 0 64.43323-23.355077 1243.096615 1243.096615 0 0 1-76.406153-44.110769c3.268923 23.552 7.286154 46.119385 11.972923 67.465846z m12.996923 51.278769c28.475077 96.886154 70.695385 158.523077 113.467077 158.523077 42.771692 0 84.992-61.636923 113.427692-158.523077A984.694154 984.694154 0 0 1 512 738.382769c-38.833231 17.762462-76.957538 32.492308-113.427692 43.953231z m-32.216616-354.461538a1131.559385 1131.559385 0 0 0 0 168.251076A1131.559385 1131.559385 0 0 0 512 680.172308a1131.559385 1131.559385 0 0 0 145.683692-84.086154 1131.559385 1131.559385 0 0 0 0-168.251077A1131.559385 1131.559385 0 0 0 512 343.827692a1131.559385 1131.559385 0 0 0-145.683692 84.086154z m7.207385-67.465847a1243.096615 1243.096615 0 0 1 76.406154-44.110769 912.699077 912.699077 0 0 0-64.393846-23.355077c-4.686769 21.346462-8.704 43.913846-12.012308 67.465846z m276.952615 303.18277a1243.096615 1243.096615 0 0 1-76.406154 44.110769c22.055385 8.940308 43.598769 16.738462 64.393847 23.355077 4.686769-21.346462 8.704-43.913846 12.012307-67.465846zM625.427692 241.664C596.992 144.777846 554.771692 83.101538 512 83.101538c-42.771692 0-84.992 61.636923-113.427692 158.523077 36.470154 11.421538 74.594462 26.190769 113.427692 43.953231a984.694154 984.694154 0 0 1 113.427692-43.953231z m13.036308 51.278769c-20.795077 6.616615-42.338462 14.414769-64.433231 23.355077a1243.096615 1243.096615 0 0 1 76.406154 44.110769 912.699077 912.699077 0 0 0-11.972923-67.465846zM512 538.269538a26.269538 26.269538 0 1 1 0-52.539076 26.269538 26.269538 0 0 1 0 52.539076z" fill="#0080FF" p-id="3443"></path></svg>,
      path: '/react-compiler'
    },
  ]

  const goto = (url: string) => {
    router.push(url)
  }

  return (
    <div class="flex gap-3 h-full">
      {
        list.map(item => {
          return <div key={item.path} class='flex flex-column cursor-pointer align-items-center' onClick={() => goto(item.path)}>
            { item.icon }
            <span class='text-sm mt-1'>{ item.label }</span>
          </div>
        })
      }
    </div>
  )
}
export default FormItem
